<template>
  <div id="app">
    <!-- 导航栏 -->
    <!-- $router.back()和$router.go(-1)都可以返回上一页 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 头像区域 -->
    <div class="img_box">
      <van-image round fit="cover" :src="userInfo.photo"></van-image>
    </div>
    <!-- 资料区域 -->
    <van-cell-group>
      <van-cell title="名称" @click="editName" :value="userInfo.name" is-link />
      <van-cell
        title="性别"
        @click="popupShow = true"
        :value="userInfo.gender ? '男' : '女'"
        is-link
      />
      <van-cell title="生日" :value="userInfo.birthday" is-link />
    </van-cell-group>

    <!-- 弹出框-修改用户名 -->
    <van-dialog
      v-model="dialogShow"
      title="编辑用户名称"
      @cancel="dialogShow = false"
      @confirm="changeName"
      show-cancel-button
    >
      <van-cell-group>
        <van-field
          v-model="userName"
          ref="nameInp"
          placeholder="请输入用户名"
        />
      </van-cell-group>
    </van-dialog>
    <!-- 弹出层-修改性别 -->
    <van-popup
      v-model="popupShow"
      position="bottom"
      :style="{ height: '132px' }"
    >
      <van-nav-bar title="编辑用户性别" left-text="取消"></van-nav-bar>
      <van-cell @click="changeSex(1)" title="男" is-link></van-cell>
      <van-cell @click="changeSex(0)" title="女" is-link></van-cell>
    </van-popup>
  </div>
</template>

<script>
// 导入用户信息修改接口
import { editUserInfoAPI } from '@/api/index.js'
export default {
  data () {
    return {
      dialogShow: false,
      userName: '',
      popupShow: false
    }
  },
  methods: {
    // 点击用户名的点击事件
    editName () {
      // 改变弹出框的显示状态为true
      this.dialogShow = true
      // 把用户名显示到输入框
      this.userName = this.userInfo.name
      // 因为vue组件默认使用的是懒加载
      this.$nextTick(() => {
        // 让输入框获得点击事件
        this.$refs.nameInp.focus()
      })
    },
    // 点击确认修改用户名
    async changeName () {
      // 发起请求，修改用户名
      await editUserInfoAPI({
        name: this.userName
      })
      // 数据修改成功后，还要改掉vuex里的数据
      this.$store.commit('setUserInfo', {
        // 保留原来的数据，单独修改name
        ...this.$store.state.userInfo,
        name: this.userName
      })
    },
    // 修改用户性别
    async changeSex (gender) {
      if (gender === this.userInfo.gender) return (this.popupShow = false)
      // 发起请求，修改性别
      await editUserInfoAPI({ gender })
      // 数据修改成功后，还要改掉vuex里的数据
      this.$store.commit('setUserInfo', {
        // 保留原来的数据，单独修改gender
        ...this.$store.state.userInfo,
        gender
      })
      // 修改完毕隐藏弹出层
      this.popupShow = false
    }
  },
  computed: {
    // 利用计算属性优化访问Vuex的数据
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  created () {
    this.$store.dispatch('reqUserInfo')
  }
}
</script>

<style scoped lang="less">
.img_box {
  height: 132px;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-image {
    width: 108px;
    height: 108px;
  }
}
::v-deep .van-dialog__header {
  padding-top: 18px;
  padding-bottom: 8px;
}
.van-cell-group {
  border: 1px solid #ddd;
}
</style>
